<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="search-list mb-10">
        筛选导出：
        <div>
          <component
              v-bind:is="item.propertyType"
              :property.sync="item"
              v-for="(item, index) in getPower"
              :key="index"
              @updateVal="updateVal"
          ></component>
        </div>
        <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            size="small"
            class="mr-10"
            :picker-options="pickerOptions1">
        </el-date-picker>
        <el-button plain size="small" @click="clearDown">清空</el-button>
        <el-button plain disabled v-if="!searchBox.start_time" size="small">巡班记录导出</el-button>
        <downexcel type="training" :option="searchBox" v-else></downexcel>
      </div>
      <!--      <tips optionTemplate="patrolIndex"></tips>-->
      <el-tabs v-model="typeTab" type="card">
        <el-tab-pane :label="item.name" :name="item.id" v-for="item in tabTypeList" :key="item.id"></el-tab-pane>
      </el-tabs>
      <trainingClass v-if="typeTab=='1'"></trainingClass>
      <trainingList v-if="typeTab=='2'"></trainingList>
    </div>
  </div>
</template>

<script>
import {pagination} from '@/utils/util.js'
import trainingClass from "./components/trainingClass";
import trainingList from "./components/trainingList";

export default {
  components: {trainingClass, trainingList},
  watch: {
    value1() {
      this.searchBox.start_time = this.value1 ? this.value1[0] : ''
      this.searchBox.end_time = this.value1 ? this.value1[1] : ''
    },
    'searchForm.department_id'() {
      console.log('变了部门')
      this.InitFn()
    }
  },
  data() {
    return {
      tableStripe: true, // 是否斑马栏
      tableBorder: true, // 单元格右边边框
      arryList: [], // 数据列表
      classVisible: false,
      classId: 0,
      Weekdate: '--',
      Weektime: '--',
      weekName: '--',
      week: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
      searchForm: {
        time: '',
        class_id: '',
        section_id: '',
        department_id: '1',
      },
      value1: [],
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now() //  - 8.64e7
        }
      },
      training: 'training',
      searchBox: {
        start_time: '',
        end_time: '',
        class_id: '',
        section_id: ''
      },
      tabList: [
        {
          name: '行政',
          id: '1'
        },
        {
          name: '后勤',
          id: '2',
        },
        {
          name: '业务',
          id: '3',
        }
      ],
      className: '',
      getPower: {
        'section_id': {
          name: 'section_id', // key名称
          default: '', // 默认值
          propertyType: "Select", // 组件名称
          placeholder: '年段', // 默认值
          valueText: '', // 值
          leve: 2,
          api: this.api.user_sectionindex, // 下拉框的请求接口
          keyName: 'section_name',// 调用的字段
          child: [
            {
              name: 'class_id',
              default: '',
              propertyType: "",
              placeholder: '班级',
              valueText: '',
              api: this.api.user_classesindex,
              keyName: 'class_name',
            }
          ]
        }
      },
      getPowerTime: {
        'section_id': {
          name: 'section_id', // key名称
          default: '', // 默认值
          propertyType: "Select", // 组件名称
          placeholder: '年段', // 默认值
          valueText: '', // 值
          leve: 2,
          api: this.api.user_sectionindex, // 下拉框的请求接口
          keyName: 'section_name',// 调用的字段
          child: [
            {
              name: 'class_id',
              default: '',
              propertyType: "",
              placeholder: '班级',
              valueText: '',
              api: this.api.user_classesindex,
              keyName: 'class_name',
            }
          ]
        }
      },
      userList: {
        1: {
          name: '幼儿',
          id: 1
        },
        2: {
          name: '教师',
          id: 2
        },
        4: {
          name: '生活老师',
          id: 4
        },
        3: {
          name: '场地',
          id: 3
        }
      },
      tabTypeList: [
        {
          id: '2',
          name: '当日巡班'
        },
        {
          id: '1',
          name: '班级历史'
        }
      ],
      typeTab: '2'
    }
  },
  created() {
    this.InitFn()
    this.updateTime()
    // this.timerID = setInterval(() => {
    //   this.updateTime()
    // }, 1000)
  },
  methods: {
    arraySpanMethod({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 1) {
        return [1, 5];
      } else if (columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5) {
        return [0, 0];
      }
    },
    // 初始化
    InitFn() {
      let data_ = JSON.parse(JSON.stringify(this.searchForm))
      this.$fetch(this.api.classActive.trainHistory.index, data_).then((response) => {
        if (response.code === 0) {
          let status = 0;
          let list_ = []
          for (let item of response.list) {
            if (!item.score) {
              item.score = 0
            } else {
              status = 1
              item.average = parseInt(item.score / item.list.length)
            }
            if (item.list.length) {
              // 巡班人数
              for (let userPoint of item.list) {
                let score = 0;
                for (let scoreList of userPoint.list) {
                  score = score + Number(scoreList.score)
                }
                userPoint.score = score // 单个分值
              }
              list_.push(item)
            }
          }
          this.arryList = JSON.parse(JSON.stringify(list_))
          // 有评分值进行排序
          if (status) {
            this.sortFn('score')
          }
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 搜索组件
    searchFn(option) {
      console.log(option, this.Weekdate)
      if (option === 'refresh') {
        this.searchForm.time = this.Weekdate;
        let newGetPower = this.getJson(this.getPowerTime)
        newGetPower['section_id'].valueText = '';
        newGetPower['section_id'].child[0].valueText = '';
        this.getPowerTime = newGetPower;
        this.searchForm.class_id = '';
        this.searchForm.section_id = '';
        this.searchForm.department_id = '1';
      } else {
        if (!this.searchForm.time) {
          this.searchForm.time = this.Weekdate;
        }
      }
      this.InitFn()
    },
    compare(attr) {
      return function (a, b) {
        var val1 = a[attr];
        var val2 = b[attr];
        return val2 - val1;
      }
    },
    sortFn(type) {
      this.arryList.sort(this.compare(type));
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    handleSelectionChange(val) {
      this.handleSelection = val
    },
    showDetailFn(id, name) {
      this.classId = id
      this.className = name
      this.classVisible = true
    },
    updateTime() {
      let cd = new Date()
      this.Weektime = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2)
      this.Weekdate = this.zeroPadding(cd.getFullYear(), 4) + '-' + this.zeroPadding(cd.getMonth() + 1, 2) + '-' + this.zeroPadding(cd.getDate(), 2)
      this.weekName = this.week[cd.getDay()]
      this.searchForm.time = this.Weekdate;
    },
    zeroPadding(num, digit) {
      let zero = ''
      for (let i = 0; i < digit; i++) {
        zero += '0'
      }
      return (zero + num).slice(-digit)
    },
    // 更新值
    updateVal(option) {
      // console.log('变更数据收到的数据内容：', option)
      if (option.input) {
        this.searchBox[option['input'].name] = option['input'].valueText
      } else if (option.select) {
        for (let i in option.select) {
          if (option.select[i].name) {
            this.searchBox[option.select[i].name] = option.select[i].valueText
          } else {
            this.searchBox[option.select[i - 1].name] = option.select[i].valueText ? option.select[i].valueText : option.select[i - 1].valueText
          }
        }
      }
    },
    updateValList(option) {
      if (option.input) {
        this.searchForm[option['input'].name] = option['input'].valueText
      } else if (option.select) {
        for (let i in option.select) {
          if (option.select[i].name) {
            this.searchForm[option.select[i].name] = option.select[i].valueText
          } else {
            this.searchForm[option.select[i - 1].name] = option.select[i].valueText ? option.select[i].valueText : option.select[i - 1].valueText
          }
        }
      }
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    clearDown() {
      this.searchBox = {
        start_time: '',
        end_time: '',
        class_id: '',
        section_id: ''
      }
      let newGetPower = this.getJson(this.getPower)
      newGetPower['section_id'].valueText = '';
      newGetPower['section_id'].child[0].valueText = '';
      this.getPower = newGetPower
      this.value1 = []
    }
  },
  mounted() {
  },
}
</script>
<style>


.lead-list-in {
  display: flex;
  align-items: center;
  min-height: 40px;
  border-bottom: 1px solid #d6d6d6;
  width: 100%;
}

.lead-list-in:hover {
  background: rgba(77, 176, 229, .6);
  cursor: pointer;
}

.lead-list-in:last-child {
  border-bottom: none;
}

.lead-list-in .lead-list-list {
  /*display: block;*/

  border-right: 1px solid #d6d6d6;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lead-list-in .lead-list-list:nth-child(1) {
  width: 100px;
}

.lead-list-in .lead-list-list:nth-child(2) {
  width: 140px;
}

.lead-list-in .lead-list-list:nth-child(3) {
  width: 140px;
}

.lead-list-in .lead-list-list:nth-child(4) {
  flex: 1;
  padding: 5px;
}

.lead-list-in .lead-list-list:nth-child(5) {
  width: 80px;
}

.lead-list-in .lead-list-list:last-child {
  border-right: none;
}

.search-list {
  display: flex;
  align-items: center;
}

</style>

